<template>
	<view class="mian" v-if="detailData">
		<view v-if="detailData.image" class="img_goods">
			<image class="img" lazy-load mode="aspectFit" :src="detailData.image"></image>
		</view>
		<view v-else class="void_goods">
			<image class="img" src="/static/goods.svg"></image>
			<view class="tip">暂无图片</view>
		</view>
		<view class="goods_main">
			<view class="brand">
				<span class="tip">{{detailData.goodsBrand}} &nbsp;{{detailData.goodsType}}</span>
				<view class="over_Insured">
					<span class="tag" v-if="!detailData.overInsured">在保</span>
					<span class="tag tag_p" v-else>过保</span>
					<span class="day_color" v-if="!detailData.overInsured">{{detailData.warrantyDay}}天</span>
				</view>
			</view>
			<view class="goods_name">
				{{detailData.goodsName}}
			</view>
			<view class="goods_ms">
				<span>型号：<span class="mo">{{detailData.goodsModel}}</span></span>
				<span>规格：<span class="mo">{{detailData.goodsSpecName}}</span></span>
			</view>
		</view>
		<view class="card">
			<view class="code_num">
				<span class="c9">一物一码：</span>{{detailData.code}}
			</view>
			<view class="time">
				<p><span class="c9">质保到期：</span>{{detailData.warrantyEndTime}}</p>
				<view class="card_k" @click="goPages(detailData.id)">
					<p class="bule">查看电子保修卡</p><uni-icons color="#007cff" size="16" type="forward"></uni-icons>
				</view>
			</view>
		</view>
		<view class="service">
			<p class="title_tip">便捷服务</p>
			<view class="card_min">
				<view class="content_c" v-for="(i,index) in dataList1" @click="ondataList(index)" wx:key="index">
					<image class="bor_img" :src="i.icon"></image>
					<span class="text">
						{{i.text}}
					</span>
				</view>
			</view>
		</view>
		<!-- 弹出申请方式-->
		<uni-popup ref="showBottom" type="bottom">
			<view class="popup_way">
				<view class="text_top_popup">
					选择类型<uni-icons class="icon" color="#aaa" @click="showBottom.close()" size="22"
						type="closeempty"></uni-icons>
				</view>
				<view class="height_list">
					<uni-list-item v-for="(item,index) in waylist" clickable @click="addWorkor(item)" :key="index">
						<template v-slot:body>
							<view class="way_name">
								<span
									:style="{color:store.state.wayType.id==item.id?'#007cff':''}">{{item.name}}</span><uni-icons
									v-if="store.state.wayType.id==item.id" color="#007cff"
									type="checkmarkempty"></uni-icons>
							</view>
						</template>
					</uni-list-item>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { onLoad, onPullDownRefresh ,onUnload} from '@dcloudio/uni-app'
	import apiGoods from '@/util/api/goods.js'
	import store from '@/store/index.js'
	import apiOrder from '@/util/api/order.js'
	const detailData = ref(null)
	const goodsId = ref('')
	let waylist = ref([])
	const showBottom = ref(null) //申请工单弹窗
	const dataList1 = ref([{
		icon: "/static/home/sqfw.svg",
		text: "申请售后",
	}, {
		icon: "/static/home/spzl.svg",
		text: "查看知识库",
	},
	{
		icon: "/static/home/sfbz.svg",
		text: "收费标准",
	},
	{
		icon: "/static/home/pjjg.svg",
		text: "配件价格",
	}
	])
	// 通过onLoad接收数据
	onLoad((e) => {
		goodsId.value = e.id
		getDetail(e.id)
	})
	// 刷新
	onPullDownRefresh(async () => {
		await Promise.all([getDetail(goodsId.value)]).then(() => {
			uni.stopPullDownRefresh()
		})
	})
	onUnload(() => {
		uni.hideLoading()
	})
	// 便捷服务
	const ondataList = async (val) => {
		switch (val) {
			case 0:
				store.commit('setorderGoodsTypes', [])
				store.commit('setchackFaultList', [])
				store.commit('setchackFaultItem', { id: null })
				store.commit('setWayType', {})
				store.commit('setcheckBrandItem', { id: null })
				store.commit('setcheckClassifyItem', { id: null })
				store.commit('setappointmentTime', null)
				store.commit('setUserOrder', {
					"address": "", //客户详细地址
					"area": "", //地址-县/区
					"city": "", //地址-市
					"helpOtherCreateOrder": false, //	是否代他人建单：0-否，1-是	
					"name": "", //客户姓名
					"otherPhone": "", //其他电话
					"phone": "", //客户手机号
					"province": "", //地址-省
					"town": "", //地址-镇
					"userId": null
				})
				await getApplyWay()
				showBottom.value.open()
				break;
			case 1:
				uni.showToast({
					title: "正在维护中，敬请期待...",
					duration: 2000,
					icon: "none"
				})
				break;
			case 2:
				uni.showToast({
					title: "正在维护中，敬请期待...",
					duration: 2000,
					icon: "none"
				})
				break;
			case 3:
				uni.showToast({
					title: "正在维护中，敬请期待...",
					duration: 2000,
					icon: "none"
				})
				break;
		}
	}
	// 电子保修卡信息
	const goPages = (id : string) => {
		uni.navigateTo({
			url: '/pages/card/detail?id=' + id
		})
	}
	// 获取报单模块列表
	const getApplyWay = async () => {
		let data = {
			"limit": 0,
			"name": "",
			"page": 0
		}
		uni.showLoading({
			title: "加载中..."
		})
		await apiOrder.getOrderModuleList(data).then(res => {
			if (res.code == 20000) {
				waylist.value = res.data.rows
			}
		})
		uni.hideLoading()
	}
	// 选择申请方式
	const addWorkor = (item) => {
		store.commit('setWayType', {
			id: item.id,
			name: item.name,
			type: item.type,//1安装
			collectCustomerGoodsPrice:item.collectCustomerGoodsPrice,
		})
		showBottom.value.close()
		uni.navigateTo({
			url: "/pages/home/add?code=" + detailData.value.code
		})
	}
	// 获取商品详情
	const getDetail = async (id) => {
		uni.showLoading({
			mask: true,
			title: '加载中...'
		})
		await apiGoods.getGoodsDetail(id).then((res : { code : number; data : any; }) => {
			if (res.code === 20000) {
				detailData.value = res.data.row
			}
		})
		uni.hideLoading()
	}
</script>

<style lang="scss" scoped>
	.mian {
		background-color: #f6f7fa;
		// height: 100vh;

		.img_goods {
			height: 480rpx;
			background-color: #f5f5f5;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.void_goods {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			height: 480rpx;
			background-color: #f5f5f5;

			.img {
				width: 60%;
				height: 200rpx;
			}

			.tip {
				color: #aaa;
				font-size: 28rpx;
			}
		}

		.goods_main {
			margin: 0 0 24rpx;
			background-color: #fff;
			padding: 24rpx;

			.brand {
				color: #000;
				display: flex;
				// align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-bottom: 16rpx;

				.over_Insured {
					display: flex;

					// flex: 1;
					// align-items: center;
					.tag {
						background-color: #007cff;
						color: #fff;
						font-size: 24rpx;
						padding: 4rpx;
						border-radius: 4rpx;
						margin-right: 6rpx;
						height: 30rpx;

						&.tag_p {
							background-color: #ccc;
							color: #eee;

						}
					}

					.day_color {
						background-color: #007cff;
						color: #fff;
						font-size: 24rpx;
						padding: 4rpx;
						border-radius: 4rpx;
						height: 30rpx;
					}
				}


				.tip {
					flex: 1;
					color: #007cff;
					font-size: 32rpx;
					font-weight: bold;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					word-wrap: break-word;
					word-break: break-all;
				}
			}

			.goods_name {
				font-weight: bold;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				word-wrap: break-word;
				word-break: break-all;
				margin-bottom: 14rpx;
			}

			.goods_ms {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				flex-wrap: wrap;
				color: #777;

				.mo {
					margin-right: 60rpx;
					color: #000;
				}
			}
		}

		.card {
			margin: 24rpx 0;
			background-color: #fff;
			padding: 24rpx;
			font-size: 24rpx;

			.code_num {
				margin-bottom: 14rpx;
			}

			.c9 {
				color: #777;
			}

			.time {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.card_k {
					display: flex;
					align-items: center;
					line-height: 24rpx;
					height: 24rpx;

					.bule {
						color: #007cff;
						margin-right: 14rpx;
						line-height: 24rpx;
						height: 24rpx;
					}
				}

			}

		}

		.service {
			margin: 24rpx 0;
			background-color: #fff;
			padding: 24rpx;

			.title_tip {
				font-size: 30rpx;
				font-weight: bold;
				color: #000;
			}

			.card_min {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;

				.content_c {
					width: 25%;
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					margin-top: 24rpx;

					.bor_img {
						width: 80rpx;
						height: 80rpx;
					}

					.text {
						font-size: 28rpx;
					}
				}
			}
		}

		.popup_way {
			height: 60vh;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #fff;
			padding-bottom: 100rpx;

			.text_top_popup {
				text-align: center;
				font-size: 32rpx;
				padding: 20rpx 0;
				font-weight: bold;

				.icon {
					position: absolute;
					right: 40rpx;
					font-weight: 500;
				}
			}

			.height_list {
				height: 100%;
				overflow: auto;

				.way_name {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
				}
			}
		}

		:deep(.uni-popup) {
			z-index: 999;
		}
	}
</style>